<template>
  <BgVue4>
    <template #imgFixed>
      <img src="@/assets/imgV2/exchange-bg-bottom.jpg" />
    </template>
    <div class="noticeDetail">
      <div v-if="showHead" class="title-style title">{{
        t('notice.details.title')
      }}</div>

      <div class="marT" v-if="notice.id > 0">
        <div class="text-title">{{ notice.title }}</div>
        <div class="text-mini">{{ notice.time }}</div>
        <!--      <div class="text">{{notice.label}}</div>-->
        <div class="text" v-html="notice.content"></div>
      </div>
    </div>
  </BgVue4>
</template>
<script>
import http from '../http'
import BgVue4 from '@/components/BgVue4.vue'

export default {
  data() {
    return {
      showHead: !this.$route.query.head,
      notice: {
        id: 0,
        // title: "PLAY DEFI正式上线",
        // time: "2022/1/10 14:00:00",
        // label: "恭喜PLAY DEFI正式上线。",
        // content: "为庆祝上线，社区将开放一系列活动福利回馈给新用户敬请期待。"
      },
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const id = this.$route.query.id
      if (id > 0) {
        const res = await http.get('/api/notice/' + id)
        if (res.code === 200) {
          const row = res.data
          this.notice = {
            id: row.id,
            title: row.title,
            time: row.create_time.substr(0, 16).replace('T', ' '),
            content: row.content,
          }
        }
      }
    },
  },
  components: { BgVue4 },
}
</script>
<style lang="less" scoped>
.noticeDetail {
  padding: 15px 20px;
  line-height: 21px;
  text-align: left;

  .title {
    // height: 44px;
    // color: #ffffff;
    font-size: 22px;

    text-align: center;
  }

  .marT {
    margin-top: 20px;
    padding: 15px 15px 9px 15px;

    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px;
  }

  .text-title {
    color: #000;
    font-size: 15px;
    font-weight: bold;
  }

  .text-mini {
    color: #666;
    font-size: 12px;

    // margin-top: 8px;
    // margin-bottom: 15px;
  }

  .text {
    color: #000;
    font-size: 14px;
    margin-bottom: 6px;
    margin-top: 6px;
  }
}
</style>
